<template>
    <div class="tabbar">
        <TabItem txt="个人车辆" mark="PersonalCar" :sel="selected" @changeSelect="changeSelected">
            <img class="home" slot="normalImg" src="../../assets/home.png" alt="">
            <img class="homeactive" slot="activeImg" src="../../assets/home-active.png" alt="">
        </TabItem>
        <TabItem txt="企业用车" mark="enterpriseCar" :sel="selected" @changeSelect="changeSelected">
            <img class="record" slot="normalImg" src="../../assets/mine.png" alt="">
            <img class="recordactive" slot="activeImg" src="../../assets/mine-active.png" alt="">
        </TabItem>
        <TabItem txt="平台服务" mark="platformService" :sel="selected" @changeSelect="changeSelected">
            <img class="record" slot="normalImg" src="../../assets/find1.png" alt="">
            <img class="recordactive" slot="activeImg" src="../../assets/find1-active.png" alt="">
        </TabItem>
    </div>
</template>
<script>
import TabItem from "./TabItem"
export default {
     data(){
        return {
            selected:this.$route.name,
            // tabbarheight:{
            //     height:null
            // }
        }
    },
    created(){
        // this.tabbarheight.height=window.innerHeight* 0.09+'px'
    },
    methods:{
        changeSelected(val){
            this.selected = val;
        }
    },
    components:{
        TabItem
    }
}
</script>
<style lang="scss" scoped>
    .tabbar{
        position: fixed;
        bottom:0;
        left:0;
        width:100%;
        height:8%;
        background: #fff;
        display: flex;
        
        .home{
            width: 1.5rem;;
            height: 1.5rem;;
        }
        .homeactive{
            width: 1.5rem;;
            height: 1.5rem;;
        }
        .record{
            width:1.5rem;;
            height: 1.5rem;;
        }
        .recordactive{
            width: 1.5rem;;
            height: 1.5rem;;
        }
        .mine{
            width: 1.5rem;;
            height: 1.5rem;;
        }
        .mineactive{
            width: 1.5rem;;
            height: 1.5rem;;
        }
    }
</style>